<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>评论通知列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
	#more, .more{
		margin-top: 0px;
		padding-bottom: 15px;
		text-align: center;
	}
	.aui-user-view-cell p {
		font-size: 13px;
	}
	.message {
		margin-top: 3px;
		font-size: 12px;
	}

    </style>
</head>
<body>
    <div class="aui-content" id="content">
        <ul class="aui-user-view" id="list">
            <!--li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/584/1169452_50.jpg?t=1445160758000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">金正恩</span>
                    <h5 class="aui-text-default message">WEB开发,桌面软件开发,服务器端开发</h5>
                </div>
            </li-->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	var page = 0, ajaxTag = 0, uid = 0;
	apiready = function(){
		uid = $api.getStorage('user_uid');
		
		// 下拉刷新
		api.setRefreshHeaderInfo({
	        visible: true,
	        loadingImg: 'widget://image/ptr_pull.png',
	        bgColor: '#efeff4',
	        textColor: '#959595',
	        textDown: '下拉可刷新',
	        textUp: '松开立即刷新',
	        showTime: true
		}, function(ret, err){
			var more = $api.byId("more");
			if(more){
				 $api.remove(more);
			}
		    page = 0;
			// Window或者Frame页面滑动到底部事件,可用于实现滚动到底部，加载更多功能
			api.addEventListener({
			    name:'scrolltobottom',
			    extra:{
			        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
			    }
			},function(ret,err){
			    getList( page );
			});
		    //从服务器加载数据，完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
		    getList( page );
		});
		
		// 首次加载时设置下拉刷新组件为刷新中状态
		api.refreshHeaderLoading();
		
	};
	
	/*
	 * 获取列表
	 * @param  integer pageIndex  	页码，第一页是从0开始的
	 */
	function getList( pageIndex ){
		if(ajaxTag){
			return false;
		}
		
		var listhtml = '';
		var url = OpenAPI.friends_list + '&uid=' + uid + '&relation=0&pageIndex=' + pageIndex;
	    var more = $api.byId("more");
	    if(more){
	        $api.text(more, '加载中...');
	    }

	    ajaxTag = 1;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    tag: ajaxTag,
		    returnAll: false,
		},function(ret,err){
			ajaxTag = 0;
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
						// 暂无消息
						if( pageIndex==0 && typeof(ret.oschina.friends) != 'object' ){
				    		$api.after($api.byId('list'), '<p id="more">暂无粉丝</p>');
				    		return false;
						}
						
						// 全部加载完毕
				    	if( pageIndex>0 && typeof(ret.oschina.friends) != 'object' ){
				        	// 移除事件监听
							api.removeEventListener({
							    name: 'scrolltobottom'
							});
							var more = $api.byId("more");
							if(more){
								 $api.remove(more);
							}
				        	$api.after($api.byId('list'), '<p id="more">全部加载完毕</p>');
				        	return false;
				    	}
				    	
						var more = $api.byId("more");
						if(more){
							 $api.remove(more);
						}
						
						if(typeof(ret.oschina.friends.friend.length) != 'number'){	// 对于只有一条数据的情况进行特殊处理
							ret.oschina.friends.friend = JSON.parse('['+JSON.stringify(ret.oschina.friends.friend)+']');
						}
						
						for(var i=0; i<ret.oschina.friends.friend.length; i++){
							// 头像处理
				    		var portrait = '../image/widget_dface.png';
				    		if(typeof(ret.oschina.friends.friend[i].portrait) == 'string' && ret.oschina.friends.friend[i].portrait.length > 0){
				    			portrait = ret.oschina.friends.friend[i].portrait;
				    		}

							listhtml += '<li class="aui-user-view-cell aui-img">';
							listhtml += '<img class="aui-img-object aui-pull-left" src="'+ portrait +'" width="48px" height="48px" tapmode onclick="openUserInfo( '+ ret.oschina.friends.friend[i].userid +' );event.cancelBubble=true;">';
							listhtml += '<div class="aui-img-body">';
							listhtml += '<span class="aui-text-primary">'+ ret.oschina.friends.friend[i].name +'</span>';
							listhtml += '<h5 class="aui-text-default message">'+ ret.oschina.friends.friend[i].expertise +'</h5>';
							listhtml += '</div>';
							listhtml += '</li>';
						}
						
				        if(pageIndex == 0){
				        	$api.html($api.byId('list'), listhtml);
				        }else{
				        	$api.append($api.byId('list'), listhtml);
				        }
						page += 1;
				        $api.after($api.byId('list'), '<p id="more" tapmode onclick="getList('+page+')">点击加载更多</p>');
				        
				        setTimeout("notice_clear( 4 );", 2000);
				        
				    }else{
					    if(more){
					        $api.text(more, '加载失败，点击重试');
					    }
				        log(err.msg);
				    }
				});
		    }else {
			    if(more){
			        $api.text(more, '加载失败，点击重试');
			    }
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    api.refreshHeaderLoadDone();

		    setTimeout("api.parseTapmode()", 100);	// 等0.1秒在执行

		});
	}
	

</script>
</html>